<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :transparent="true" backgroundColor="#313431" color="#222222"
			:title="pageTitle" :fontWeight="600">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('page_sharing/accompany/details')">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="rz-header">
				<view class="name">碰头人入驻</view>
			</view>
			<view class="rz-content">
				<image class="rz-icon"
					src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png"
					mode="heightFix"></image>
				<!-- <view class="hite">入驻成功立享40元现金红包</view> -->
				<view class="step">
					<view class="step-1 step-c"></view>
					<view class="dotted"></view>
					<view class="step-2 step-c"></view>
					<view class="dotted"></view>
					<view class="step-3 step-1 last"></view>
				</view>
				<view class="rz-list">
					<view class="name">开户银行</view>
					<input class="rz-input" v-model="value1" type="text" placeholder="请填写" />
				</view>
				<view class="rz-list">
					<view class="name">银行账号</view>
					<input class="rz-input" v-model="value2" type="idcard" placeholder="请填写" />
				</view>
				<view class="rz-list">
					<view class="name">开户银行省市</view>
					<view class="rz-input-s" :class="{'resident': resident}">
						{{resident? resident : '请选择'}}
					</view>
				</view>
				<view class="rz-list">
					<view class="name">开户银行全称</view>
					<input class="rz-input" v-model="value4" type="idcard" placeholder="请填写" />
				</view>
				<view class="msg">
					您的银行卡信息用于后续在平台收入的结算。为了您在平台资金的入账便捷与安全，我们将为您开通用于收款的微信商户账户，后续微信支付宝产生的结算费率将由平台承担，您无需再额外支付提现费用。
				</view>
			</view>
		</view>
		<button class="btn-primary btn-rz" @tap.stop.prevent="onSubmit">确认提交并领取红包</button>
		<uv-popup :safeAreaInsetBottom="false" ref="popup" mode="bottom" round="20">
			<view class="resident-pop">
				<view class="header">
					<view class="title">选择开户银行省市</view>
					<view class="close" @tap="close"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<uv-picker ref="picker" :columns="addressList" keyName="name" @change="change">
				</uv-picker>
				<view class="btn-box">
					<view class="look" @tap="close">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="submit">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="submitPopup" :closeOnClickOverlay="false" bgColor="none">
			<reminder title='提交成功'
				value="提交成功！请点击下方按钮与微信支付签约签约完成后，平台将对您的信息进行审核，审核周期1-2个工作日，请您留意微信消息通知～审核通过您的红包将发至您的钱包账户，请注意查收～"
				image="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc3.png">
				<button class="btn-primary btn-sign" @tap.stop.prevent="sign">确认</button>
			</reminder>
		</uv-popup>
		<uv-toast ref="toast"></uv-toast>
		<survey-pop></survey-pop>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		idCard
	} from '@/uni_modules/uv-ui-tools/libs/function/test.js';
	import dayjs from "dayjs";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '', //标题
				agreement: false,
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				pickeDefaultValue: [3442, 1, 2],
				second: 3,
				resident: null,
				value1: '',
				value2: '',
				value4: '',
				step: true,
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		onLoad(options) {},
		onShow: function() {},
		onHide() {},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			onAgreement(detail, name) {
				this.agreement = !detail
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},

			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.pickeDefaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.pickeDefaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.pickeDefaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},
			change(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs, true)
				}
			},
			close() {
				this.$refs.popup.close();
			},
			submit() {
				let resident = this.$refs.picker.confirm();
				this.resident = resident.value[1].name + '·' + resident.value[2].name
				this.close()
			},

			onSubmit() {
				if (!this.value1) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入开户银行"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.value2) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入银行账号"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.resident) {
					this.$refs.toast.show({
						type: 'default',
						message: "请选择开户银行省市"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!this.value4) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入开户银行全称"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				let register_save = uni.getStorageSync('register_save');
				// register_save = Object.assign(register_save, {
				// 	pengAreaList: pengAreaList,
				// 	pengAreaList: pengCategoryList
				// });
				this.onSubmitPop(register_save)
			},
			onSubmitPop(register_save) {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				app._post_form("/client/peng-register/save", register_save, (res) => {
					this.$refs.submitPopup.open();
				}, false, () => {
					that.$refs.toast.hide()
				})
				// var timer = setInterval(() => {
				// 	this.second--
				// 	if (this.second == 0) {
				// 		clearInterval(timer);
				// 		this.step = false
				// 	}
				// }, 1000);
			},
			sign() {
				uni.setStorageSync('sign', true);
				uni.navigateTo({
					url: '/pages/user/index',
				});
			},
			// 返回上一页
			goBack: function(url) {
				if (!url) {
					app.navigationTo(url + '?id=' + this.userId)

				} else {
					app.beNavigateBack();
				}
				uni.removeStorageSync('details');
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/server-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 220rpx 0 160rpx;
			min-height: 100vh;

			.rz-header {
				box-sizing: border-box;
				padding: 0 280rpx 0 52rpx;

				.name {
					font-size: 48rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 44rpx;
					margin-bottom: 32rpx;
				}

				.title {
					font-size: 22rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 30rpx;
					margin-bottom: 22rpx;
				}
			}

			.rz-content {
				box-sizing: border-box;
				padding: 38rpx 36rpx 24rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				position: relative;

				.rz-icon {
					height: 158rpx;
					position: absolute;
					right: 88rpx;
					top: -126rpx;
				}

				.hite {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4664;
					line-height: 33rpx;
					box-sizing: border-box;
					padding: 10rpx 0rpx 10rpx 17rpx;
					background: rgba(255, 70, 100, 0.1);
					border-radius: 12rpx;
					margin-bottom: 41rpx;

					&::before {
						font-family: "dy-iconfont";
						content: "\e66e";
						font-size: 28rpx;
						padding-right: 7rpx;
						box-sizing: border-box;
					}
				}

				.step {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 103rpx;



					.dotted {
						width: 222rpx;
						height: 1rpx;
						border-bottom: 1px dashed #8F8F8F;
						box-sizing: border-box;
					}

					.step-2 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;
						&::before {
							position: absolute;
							left: 50%;
							bottom: -63rpx;
							transform: translateX(-50%);
							min-width: 150rpx;
							content: "填写入驻信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.step-3 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;
						&::before {
							position: absolute;
							left: 50%;
							bottom: -63rpx;
							transform: translateX(-50%);
							min-width: 150rpx;
							content: "填写基础信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.step-1 {
						width: 14rpx;
						height: 14rpx;
						background: #0E0E0D;
						border-radius: 50%;
						border: 8rpx solid #CFCFCF;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -63rpx;
							transform: translateX(-50%);
							min-width: 150rpx;
							content: "上传实名信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.last {

						&::before {
							content: "填写基础信息";
						}
					}

					.step-c {
						width: 30rpx;
						height: 30rpx;
						background: #0E0E0D;
						backdrop-filter: blur(10rpx);
						border-radius: 50%;
						border: none;
						position: relative;
						&::after {
							font-family: "dy-iconfont";
							content: "\e61c";
							color: #A7F517;
							font-size: 20rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}

						&::before {
							position: absolute;
							left: 50%;
							bottom: -22rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}
				}

				.identity-card {
					.title {
						font-size: 30rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}

					.content {
						font-size: 22rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 30rpx;
						margin-bottom: 24rpx;
					}

					.identity-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 40rpx;

						.identity-item {
							width: calc((100% - 31rpx) / 2);
							height: 237rpx;
							background: #FFFFFF;
							box-shadow: 0px 0 20rpx 0px #EBF2EE;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #282D2D;
							line-height: 33rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.card-image {
								width: 222rpx;
								height: 132rpx;
								background: #F6F8F7;
								margin-bottom: 24rpx;
							}
						}
					}
				}

				.rz-list {
					width: 100%;
					box-sizing: border-box;
					padding: 24rpx 28rpx;
					background: #F6F8F7;
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 36rpx;

					.name {
						font-size: 30rpx;
						font-weight: 900;
						color: #282D2D;
						line-height: 40rpx;
					}

					.rz-input {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #282D2D;
						line-height: 37rpx;
						text-align: right;
						// direction: rtl;
					}

					.rz-input-s {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: grey;
						line-height: 37rpx;
						text-align: right;

						&.resident {
							color: #282D2D;
						}
					}
				}

				.msg {
					font-size: 22rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 30rpx;
					margin-top: 32rpx;
				}
			}
		}

		.btn-rz {
			position: fixed;
			bottom: 64rpx;
			left: 50%;
			// height: 102rpx;
			// line-height: 102rpx;
			transform: translateX(-50%);
			width: calc(100% - 77rpx);
			font-size: 32rpx;
			font-weight: 900;
			z-index: 3;
		}

		.submit-step1 {
			width: 626rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 72rpx 56rpx;
			font-size: 32rpx;
			font-weight: 900;
			color: #282D2D;
			line-height: 45rpx;
			border-radius: 80rpx;
		}

		.btn-sign {}

		.resident-pop {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 43rpx 31rpx 66rpx;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 33rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.delete-hint {
				font-size: 32rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 45rpx;
				margin: 27rpx 0 49rpx 0;
				text-align: center;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.look {
					width: calc((100% - 24rpx)/2);
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #7B867F;
					font-size: 32rpx;
					font-weight: 900;
					color: #999B9B;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}

				.btn-submit {
					width: calc((100% - 24rpx)/2);
					// height: 102rpx;
					// line-height: 102rpx;
				}
			}
		}
	}
</style>